<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head th:replace="common/header::common_head"></head>
<title>材质管理</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<!-- DataTables -->
<link rel="stylesheet" href="../../bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
<style type="text/css">
    .shadow{
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        top:0;
        z-index:998;
        background-color:gainsboro;
        opacity:0.6;
        display:none;
    }
    #addTd{
        float: right;
        margin: 15px;
    }
</style>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <div th:replace="common/LeftCommon::common_top_left"></div>
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                材质管理
                <small>MaterialManagement</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="/index"><i class="fa fa-dashboard"></i> 首页</a></li>
                <li><a href="#">商品设置</a></li>
                <li class="active">材质管理</li>
            </ol>
        </section>
        <!-- Main content -->
        <section class="content" id="pcPage" style="display: none">
            <div class="row"  >
                <div class="col-xs-2"></div>
                <div class="col-xs-8" style="padding-top: 25px">
                    <div class="box">
                        <div class="box-header">
                            <button class="btn btn-info" onclick="addMaterialDiv()">＋新增材质</button>
                        </div>
                        <hr style=" height:2px;border:none;border-top:2px dotted #575757;">
                        <!-- /.box-header -->
                        <div class="box-body">
                            <table id="example1" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>操作</th>
                                    <th>材质名称</th>
                                    <th>分组</th>
                                    <th>创建时间</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="goodsMaterial,goodsStat: ${goodsMaterials}">
                                    <th><a href="javascript:void(0)" th:onclick="'javascript:deleteMaterial(\''+ ${goodsMaterial.id} + '\')'">删除</a>
                                        <a  href="javascript:void(0)"  th:onclick="'javascript:editMaterialDiv(\''+ ${goodsMaterial.id} + '\')'">修改</a></th>
                                    <td th:text="${goodsMaterial.name}"></td>
                                    <td th:text="${goodsMaterial.describe}"></td>
                                    <td th:text="${#dates.format(goodsMaterial.createTime, 'yyyy-MM-dd  HH:mm:ss')}"></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
            <div class="shadow"></div>
            <div id="addMaterial" style="width: 25%;position:fixed;z-index:999; display:none; top: 30%;left: 40%;" >
                <div class="row">
                    <div class="col-xs-12">
                        <div style="height: 40px; background: #0b97c4; text-align: center"><p style="font-size: larger"><b>新增材质</b></p></div>
                        <form style="background: white" id="material" method="post">
                            <table>
                                <tr>
                                    <td class="col-xs-7" id="addTd">材质名称：</td>
                                    <td class="col-xs-5"><input name="name" placeholder="材质名称" id="name"></td>
                                </tr>
                                </tr>
                                <tr>
                                    <td class="col-xs-7" id="addTd">描述:</td>
                                    <td class="col-xs-5">
                                        <input type="text" name="describe" placeholder="材质描述，100字以内" id="describe"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="col-xs-7" id="addTd">时间:</td>
                                    <td class="col-xs-5">
                                        <p id="createTime" name="createTime"> </p>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="col-xs-6" id="addTd"><button onclick="addMaterial()" >确定</button></td>
                                    <td class="col-xs-6" style="margin: 0 auto"><button onclick="hideShadow()" >取消</button></td>
                                </tr>
                            </table>
                        </form>
                    </div>
                </div>
            </div>
            <div id="editMaterial" style="width: 25%;position:fixed; z-index:999; display:none; top: 30%;left: 40%;" >
                <div class="row">
                    <div class="col-xs-12">
                        <div style="height: 40px; background: #0b97c4; text-align: center"><p style="font-size: larger"><b>编辑品牌</b></p></div>
                        <form style="background: white" id="material" method="post">
                            <table>
                                <tr>
                                    <td class="col-xs-7" id="addTd">材质名称：</td>
                                    <td class="col-xs-5"><input name="name" placeholder="材质名称" id="ename"></td>
                                </tr>
                                <tr>
                                    <td class="col-xs-7" id="addTd">描述:</td>
                                    <td class="col-xs-5">
                                        <input type="text" name="describe" placeholder="材质描述,100字以内" id="editdescribe"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="col-xs-6" id="addTd"><button onclick="editMaterial()" >确定</button></td>
                                    <td class="col-xs-6" style="margin: 0 auto"><button onclick="hideShadow()" >取消</button></td>
                                </tr>
                            </table>
                        </form>

                    </div>
                </div>
            </div>
        </section>
        <!-- /.content -->
        <section class="content" id="mobile" style="display: none">
            <div class="row">
                <div class="col-xs-12" style="padding-top: 25px">
                    <div class="box">
                        <div class="box-header">
                            <button class="btn btn-info" onclick="addMaterialDiv()">＋新增材质</button>
                        </div>
                        <hr style=" height:2px;border:none;border-top:2px dotted #575757;">
                        <!-- /.box-header -->
                        <div class="box-body">
                            <table style="table-layout: fixed;" class="table table-bordered table-striped">
                                <tbody>
                                <tr th:each="goodsMaterials,goodsStat: ${goodsMaterials}">
                                    <th style="height: 10%"><a href="javascript:void(0)" th:onclick="'javascript:deleteMaterial1(\''+ ${goodsMaterials.id} + '\')'">删除</a>&nbsp&nbsp
                                        <a  href="javascript:void(0)"  th:onclick="'javascript:editMaterialDiv(\''+ ${goodsMaterials.id} + '\')'">修改</a></th>
                                    <td style="height: 10%" th:text="${goodsMaterials.name}"></td>
                                    <td style="height: 10%" th:text="${goodsMaterials.describe}"></td>
                                    <td style="height: 10%" th:text="${#dates.format(goodsMaterials.createTime, 'yyyy-MM-dd  HH:mm:ss')}"></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
            <div class="shadow"></div>
            <div id="addMaterial1" style="width: 70%;position:fixed;z-index:999; display:none; top: 20%;left: 10%;" >
                <div class="row">
                    <div class="col-xs-12">
                        <div style="height: 40px; background: #0b97c4; text-align: center"><p style="font-size: larger"><b>新增材质</b></p></div>
                        <form style="background: white" id="material1" method="post">
                            <table>
                                <tr>
                                    <td  id="addTd">材质名称：</td>
                                    <td ><input name="name" placeholder="材质名称" id="name"></td>
                                </tr>
                                </tr>
                                <tr>
                                    <td  id="addTd">描述:</td>
                                    <td >
                                        <input type="text" name="describe" placeholder="材质描述，100字以内" id="describe"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td  id="addTd">时间:</td>
                                    <td >
                                        <p id="createTime1" name="createTime"> </p>
                                    </td>
                                </tr>
                                <tr>
                                    <td  id="addTd"><button onclick="addMaterial1()" >确定</button></td>
                                    <td style="margin: 0 auto"><button onclick="hideShadow()" >取消</button></td>
                                </tr>
                            </table>
                        </form>
                    </div>
                </div>
            </div>
            <div id="editMaterial1" style="width:70%;position:fixed;z-index:999; display:none; top: 20%;left: 10%;" >
                <div class="row">
                    <div class="col-xs-12">
                        <div style="height: 40px; background: #0b97c4; text-align: center"><p style="font-size: larger"><b>编辑品牌</b></p></div>
                        <form style="background: white" id="material1" method="post">
                            <table>
                                <tr>
                                    <td id="addTd">材质名称：</td>
                                    <td ><input name="name" placeholder="材质名称" id="ename1"></td>
                                </tr>
                                <tr>
                                    <td id="addTd">描述:</td>
                                    <td>
                                        <input type="text" name="describe" placeholder="材质描述,100字以内" id="editdescribe1"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td  id="addTd"><button onclick="editMaterial1()" >确定</button></td>
                                    <td style="margin: 0 auto"><button onclick="hideShadow()" >取消</button></td>
                                </tr>
                            </table>
                        </form>

                    </div>
                </div>
            </div>
        </section>



    </div>
    <footer th:replace="common/footer::common_footer"></footer>
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Create the tabs -->
        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
            <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
            <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
            <!-- Home tab content -->
            <div class="tab-pane" id="control-sidebar-home-tab">
                <h3 class="control-sidebar-heading">Recent Activity</h3>
                <ul class="control-sidebar-menu">
                    <li>
                        <a href="javascript:void(0)">
                            <i class="menu-icon fa fa-birthday-cake bg-red"></i>

                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>

                                <p>Will be 23 on April 24th</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <i class="menu-icon fa fa-user bg-yellow"></i>

                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>

                                <p>New phone +1(800)555-1234</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>

                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>

                                <p>nora@example.com</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <i class="menu-icon fa fa-file-code-o bg-green"></i>

                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>

                                <p>Execution time 5 seconds</p>
                            </div>
                        </a>
                    </li>
                </ul>
                <!-- /.control-sidebar-menu -->

                <h3 class="control-sidebar-heading">Tasks Progress</h3>
                <ul class="control-sidebar-menu">
                    <li>
                        <a href="javascript:void(0)">
                            <h4 class="control-sidebar-subheading">
                                Custom Template Design
                                <span class="label label-danger pull-right">70%</span>
                            </h4>

                            <div class="progress progress-xxs">
                                <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <h4 class="control-sidebar-subheading">
                                Update Resume
                                <span class="label label-success pull-right">95%</span>
                            </h4>

                            <div class="progress progress-xxs">
                                <div class="progress-bar progress-bar-success" style="width: 95%"></div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <h4 class="control-sidebar-subheading">
                                Laravel Integration
                                <span class="label label-warning pull-right">50%</span>
                            </h4>

                            <div class="progress progress-xxs">
                                <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <h4 class="control-sidebar-subheading">
                                Back End Framework
                                <span class="label label-primary pull-right">68%</span>
                            </h4>

                            <div class="progress progress-xxs">
                                <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
                            </div>
                        </a>
                    </li>
                </ul>
                <!-- /.control-sidebar-menu -->

            </div>
            <!-- /.tab-pane -->
            <!-- Stats tab content -->
            <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
            <!-- /.tab-pane -->
            <!-- Settings tab content -->
            <div class="tab-pane" id="control-sidebar-settings-tab">
                <form method="post">
                    <h3 class="control-sidebar-heading">General Settings</h3>

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            Report panel usage
                            <input type="checkbox" class="pull-right" checked>
                        </label>

                        <p>
                            Some information about this general settings option
                        </p>
                    </div>
                    <!-- /.form-group -->

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            Allow mail redirect
                            <input type="checkbox" class="pull-right" checked>
                        </label>

                        <p>
                            Other sets of options are available
                        </p>
                    </div>
                    <!-- /.form-group -->

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            Expose author name in posts
                            <input type="checkbox" class="pull-right" checked>
                        </label>

                        <p>
                            Allow the user to show his name in blog posts
                        </p>
                    </div>
                    <!-- /.form-group -->

                    <h3 class="control-sidebar-heading">Chat Settings</h3>

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            Show me as online
                            <input type="checkbox" class="pull-right" checked>
                        </label>
                    </div>
                    <!-- /.form-group -->

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            Turn off notifications
                            <input type="checkbox" class="pull-right">
                        </label>
                    </div>
                    <!-- /.form-group -->

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            Delete chat history
                            <a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
                        </label>
                    </div>
                    <!-- /.form-group -->
                </form>
            </div>
            <!-- /.tab-pane -->
        </div>
    </aside>
    <div class="control-sidebar-bg"></div>
</div>
<!-- jQuery 3 -->
<script src="../../bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="../../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- DataTables -->
<script src="../../bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="../../bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="../../bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="../../bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js"></script>
<!-- page script -->
<script>
    $(function () {
        $('#example1').DataTable()
        $('#example2').DataTable({
            'paging'      : false,
            'lengthChange': false,
            'searching'   : false,
            'ordering'    : false,
            'info'        : false,
            'autoWidth'   : false
        })
    })
    function addMaterial() {
        $.ajax({
            url: "/material/addMaterial",
            type: "POST",
            data: $("#material").serialize(),
            success: function (data) {
                if (data.code == 1) {
                    window.location.href = "/setting/material_management";
                    alert("增加完成")
                } else {
                    alert(data.msg);
                }
            }
        });
    }
    function addMaterial1() {
        $.ajax({
            url: "/material/addMaterial",
            type: "POST",
            data: $("#material1").serialize(),
            success: function (data) {
                if (data.code == 1) {
                    window.location.href = "/setting/material_management";
                    alert("增加完成")
                } else {
                    alert(data.msg);
                }
            }
        });
    }
    // 打开增加尺寸框
    function addMaterialDiv() {
        $(".shadow").css({'display':'block'});
        $("#addMaterial").show();
        $("#addMaterial1").show();
        return 0;
    }
    // 删除尺寸
    function deleteMaterial(materialId) {
        $.ajax({
            url:"/material/deleteMaterial",
            type:'POST',
            data:{
                materialId:materialId
            },
            success:function (data) {
                if (data.code == 1) {
                    window.location.href = "/setting/material_management";
                } else {
                    alert(data.msg);
                }
            }
        })
    }
    function deleteMaterial1(materialId) {
        $.ajax({
            url:"/material/deleteMaterial",
            type:'POST',
            data:{
                materialId:materialId
            },
            success:function (data) {
                if (data.code == 1) {
                    window.location.href = "/setting/material_management";
                } else {
                    alert(data.msg);
                }
            }
        })
    }
    var ematerialId = "";
    // 打开编辑尺码框
    function editMaterialDiv(materialId) {
        if (materialId == null) {
            alert("未知错误");
            return 0;
        }
        ematerialId = materialId;
        $(".shadow").css({'display':'block'});
        $("#editMaterial").show();
        $("#editMaterial1").show();
        return 0;
    }
    // 修改
    function editMaterial() {
        $.ajax({
            url:"/material/editMaterial",
            type:'POST',
            data:{
                id:ematerialId,
                name:$("#ename").val(),
                describe:$("#editdescribe").val()
            },
            success:function (data) {
                if (data.code == 1) {
                    window.location.href = "/setting/material_management";
                    alert("修改成功");
                } else {
                    alert(data.msg);
                }
            }
        })
    }
    function editMaterial1() {
        $.ajax({
            url:"/material/editMaterial",
            type:'POST',
            data:{
                id:ematerialId,
                name:$("#ename1").val(),
                describe:$("#editdescribe1").val()
            },
            success:function (data) {
                if (data.code == 1) {
                    window.location.href = "/setting/material_management";
                    alert("修改成功");
                } else {
                    alert(data.msg);
                }
            }
        })
    }
    function hideShadow() {
        $(".shadow").css({'display':'none'});
        $('#addMaterial').hide();
        $('#editMaterial').hide();
        $("#material")[0].reset();
    }
    var date = new Date(+new Date()+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'')
    document.getElementById("createTime").innerHTML=date;

    var date = new Date(+new Date()+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'')
    document.getElementById("createTime1").innerHTML=date;
//pc移动分离
    function IsPC() {
        var userAgentInfo=navigator.userAgent;//获取当前浏览器的信息
        var Agents=["Android", "iPhone","SymbianOS", "Windows Phone","iPad", "iPod"];

        var flag = true;
        for (var i = 0; i < Agents.length; i++) {
            if (userAgentInfo.indexOf(Agents[i]) > 0) {//判断是否是移动端
                flag = false;
                break;
            }
        }
        return flag;
    }
    $(document).ready(function(){
        if(IsPC()){
            $("#pcPage").show();//pc端页面显示
        }else{
            $("#mobile").show();//移动端页面显示
        }
    })
</script>
</body>
</html>
